<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组建的制作</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <model></model>
    <model></model>
    <model></model>
</div>
<div id="app1">
    <model></model>
    <model></model>
    <model></model>
</div>
<script type="text/javascript">
    Vue.component("model", {
        template: "<div><h1 v-show='show'>{{wenBen}}</h1><input type='text' v-model='wenBen'>" +
            "<button type='button' @click='btnfn'>点我</button></div>",
        data: function () {
            return {
                title: true,
                wenBen:"",
                show:true
            }
        },
        methods: {
            btnfn: function () {
                let title= this.title=!this.title;
                this.show=!this.show;

                if(title){
                    this.wenBen="hello VUE"
               }else{
                   this. wenBen="你是傻逼"
                }
            }
        }
    });
    new Vue({
        el: '#app'
    });
    new Vue({
        el: '#app1'
    })


</script>

</body>
</html>